<style lang='scss'>
@import '@/assets/css/index';
.game1 {
	@include page();
	.wrapper{
		display: flex;
    flex-direction: column;
    flex:1;
		.contentBox{
			@include contentBox();
      .xx{
        position: absolute;
				width: 8rem !important;
				height: 8rem !important;
				bottom: 10%;
				left: 2rem;
      }
      .tx{
        position: absolute;
				width: 12rem !important;
				height: 8rem !important;
				bottom: 10%;
				right: 0rem;
        // transform: rotate(180deg);
      }
      .rect{
        position: absolute;
				width: 9.7rem !important;
				height: 9.7rem !important;
				top: 22%;
				right: 2rem;
        z-index: 10;
      }
      .yx{
        position: absolute;
				width: 9.7rem !important;
				height: 9.7rem !important;
				top: 50%;
				right: 12rem;
      }
      .zx{
        position: absolute;
				width: 10.7rem !important;
				height: 11rem !important;
				top: 22%;
				left: 2rem;
      }
		}
	}
}

</style>
<template>
  <div class="game1" ref="game">
		<div class="wrapper">
			<!-- <div class="passTitle">第1关</div> -->
			<myheader :passInfo="passInfo"></myheader>
			<div class="contentBox" ref="contentBox">
				<img class="xx" ref="xx"
					@touchstart.stop="touchstartHandle('xx',$event)"   
					@touchmove.stop="touchmoveHandle('xx',$event)"
					src="../../../assets/img/g1/xx.png">
				<img class="tx" ref="tx"
					@touchstart.stop="touchstartHandle('tx',$event)"   
					@touchmove.stop="touchmoveHandle('tx',$event)"
					src="../../../assets/img/g1/tx.png">
				<img class="rect" ref="rect"
					@touchstart.stop="touchstartHandle('rect',$event)"   
					@touchmove.stop="touchmoveHandle('rect',$event)"
					src="../../../assets/img/g1/rect.png">
        <img class="yx" ref="yx"
					@touchstart.stop="touchstartHandle('yx',$event)"   
					@touchmove.stop="touchmoveHandle('yx',$event)"
					src="../../../assets/img/g1/yx.png">
        <img class="zx" ref="zx"
					@touchstart.stop="touchstartHandle('zx',$event)"   
					@touchmove.stop="touchmoveHandle('zx',$event)"
					src="../../../assets/img/g1/zx.png">
			</div>
		</div>
  </div>
</template>

<script>
import myheader from './header2.vue'
import {mapState} from 'vuex'
export default {
  name: 'game1',
  components: {
		myheader
  },
  data() {
    return {
      coordinate: {
        client: {},
        elePosition: {},
        targetScope: {},
        showPop: false,
      },
	  passInfo:{}
    }
  },
  created () {
    this.$store.commit("setIsPass",false)
  },
  computed: {
    ...mapState(['fivepass'])
  },
  created () {
	  //在页面链接中获取到当前是第几关
    const ji = this.$route.query.ji
	this.passInfo = {
	  ji: ji,
      text: '制造一个长宽不相等的长方形',
      tip: '将正方形移出屏幕一半即可'
    }
  },
  mounted() {
    
	const rect = this.$refs["rect"]
    console.log("rect.clientHeight",rect.clientHeight)

	const screenWidth = window.screen.width
	const screenHeight = window.screen.height
	console.log("screenHeight", screenHeight)
	this.coordinate.targetScope.x = [0, screenWidth]
	this.coordinate.targetScope.y = [screenHeight - rect.clientHeight/10,screenHeight]
  },
  methods: {
	  touchstartHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
	  touchmoveHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
		  // console.log(`(${x},${y})`)
		  this.ok(e)
	  },
	  ok(e) {
		if(e.target.className=='rect'){
			let element = e.changedTouches[0]
			if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
			if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
				// 通过关卡
				this.$store.commit("setIsPass",true)
				console.log("isPass",this.$store.state.isPass)
			}  
			}
		}
	  },
	}
}
</script>
